<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <van-nav-bar title="购买职位置顶" left-arrow fixed @click-left="$router.back()" />
    <!-- 导航栏 end -->

    <!-- 内容 start -->
    <div class="content-top my-store">
      <van-field @click="ppShowJob = true" v-model="jobSel.jobName" readonly clickable size="large" type="textarea" rows="1" :autosize="{ maxHeight: 120, minHeight: 24 }" label="置顶职位" placeholder="请选择（仅限在招职位）" :border="false" label-class="goods-buy-label" style="margin-bottom: 8px; font-size: 15px" />
      <van-field @click="ppShowType = true" v-model="topType" readonly clickable size="large" label="置顶类型" placeholder="请选择（按职能/按关键字）" :border="false" label-class="goods-buy-label" style="margin-bottom: 8px; font-size: 15px" />

      <dl class="goods-buy01">
        <dt>
          <b>置顶日期</b>
          <!-- <i></i>
          <span>已职能置顶</span> -->
          <i></i>
          <span>已关键字置顶</span>
        </dt>
        <dd class="calendar">
          <p class="week">
            <span>周日</span>
            <span>周一</span>
            <span>周二</span>
            <span>周三</span>
            <span>周四</span>
            <span>周五</span>
            <span>周六</span>
          </p>
          <ul class="day">
            <li :class="{'unable':item.isPrevious,'selected':selDays.indexOf(index) != -1}" v-for="item,index in days" :key="index" @click="onDay(index)">
              <div>
                <i class="gjz" v-if="item.enable"></i>
                <!-- <i class="zn"></i> -->
                <b>{{item.day}}</b>
                <small>{{item.month}}月</small>
              </div>
            </li>
          </ul>
        </dd>
      </dl>

      <dl class="goods-buy">
        <dt>购买说明</dt>
        <dd style="flex-direction: column; padding: 0 15px 5px">
          <span>1、置顶职位在搜索结果中靠前，同为置顶职位按刷新时间排序；</span>
          <span>1.1、在搜索页面第一页，置顶展示所选职位；</span>
          <!-- <span>1.2、购买了“按职位职能”类型的，求职者通过职能搜索职位时，匹配到所选职位，则该职位再次置顶；</span> -->
          <span>
            1.2、购买了“按职位名称关键字”类型的，求职者通过关键字搜索职位时，匹配到所选职位，则该职位再次置顶；</span>
          <span>2、置顶时间内用户不得更换置顶职位和置顶类型，但是可以停止置顶，有效期内您可以随时再次启用该功能（请在我的服务中进行操作）。</span>
        </dd>
      </dl>

      <div style="margin: 15px">
        <van-button type="primary" block color="#07f" round style="font-size: 18px" :text="`确认购买 ( 需支付${price}点 )`" @click="buy" :loading="buyLoading"></van-button>
      </div>
    </div>
    <!-- 内容 end -->

    <!-- 置顶职位弹框 start -->
    <van-popup v-model="ppShowJob" round position="bottom">
      <van-picker title="选择置顶职位" show-toolbar :columns="jobList" @confirm="confirmJob" @cancel="ppShowJob=false" value-key="jobName" />
    </van-popup>
    <!-- 置顶职位弹框 end -->

    <!-- 置顶类型弹框 start -->
    <van-popup v-model="ppShowType" round position="bottom">
      <div class="store-fixed-type-picker">
        <p>
          <button type="button" @click="ppShowType=false">取消</button>
          <span>选择置顶类型</span>
          <button type="button" @click="ppShowType = false">确认</button>
        </p>
        <ul>
          <!-- <li>
            <b>按职能</b>
            <small>个人通过 “职能” 搜索职位时，<br />匹配到您的职位，该职位再次置顶</small>
          </li> -->
          <li @click="confirmType('按关键字')">
            <b>按关键字</b>
            <small>个人通过 “关键字” 搜索职位时，<br />匹配到您的职位，该职位再次置顶</small>
          </li>
        </ul>
      </div>
    </van-popup>
    <!-- 置顶类型弹框 end -->
  </div>
</template>

<script>
import { NavBar, Button, Popup, Picker, Field, Dialog, Toast } from "vant";
import Global from '@/Global';
export default {
  name: "listPage",
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [Picker.name]: Picker,
  },
  // 定义属性
  data() {
    return {
      ppShowJob: false,
      ppShowType: false,
      jobList: [],
      jobSel: {},
      topType: '按关键字',
      days: [],
      selDays: [],
			buyLoading:false,
    };
  },
  computed: {
    price() { return 108 * this.selDays.length }
  },
  mounted() {
    this.getJobTopDays();
    this.getJobListOnLine();
  },
  // 方法集合
  methods: {
    getJobListOnLine() {
      this.$api.get('/CompanyMine/GetJobListOnLine').then(res => {
        if (res.success) {
          this.jobList = res.response;
        }
        else {
          //no data
          Dialog.alert({ title: '提示', message: "没有正在招聘的岗位，您可以发布后再使用该服务" }).then(() => { this.$router.back() })
        }
      })
    },
    getJobTopDays() {
      this.$api.get('/CompanyMine/GetJobTopDays').then(res => {
        if (res.success) {
          this.days = res.response;
        }
      })
    },
    confirmJob(item) {
      this.jobSel = item;
      this.ppShowJob = false;
    },
    confirmType(type) {
      this.topType = type
      this.ppShowType = false;
    },
    onDay(index) {
      var indexInDays = this.selDays.indexOf(index);
      if (indexInDays == -1) {
        //最多7天
        if (this.selDays.length == 7) {
          Toast('最多只能选择7天');
          return;
        }
        this.selDays.push(index);
      }
      else {
        this.selDays.splice(indexInDays, 1);
      }
    },
    buy() {
			if(!this.jobSel.jobID){Toast('请选择岗位');return;}
			if(this.selDays.length==0){Toast('请选择置顶日期');return;}
			this.buyLoading=true;
			let topDate = []
			for (let index = 0; index < this.selDays.length; index++) {
				let item = this.days[this.selDays[index]];
				topDate.push(`${item.year}-${item.month}-${item.day}`);
			}
      this.$api.post('/CompanyMine/BuyServiceJobTop', { jobID: this.jobSel.jobID, topType: this.topType, topDate:topDate.join(','), price: this.price }).then(res => {
				this.buyLoading = false;
        Toast(res.msg);
        if (res.success) { this.$router.back(); this.$bus.$emit(Global.bus_company_service_update); }
      })
    }
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>